<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../Css/easyui.css">
    <link rel="stylesheet" type="text/css" href="../Css/icon.css">
    <link rel="stylesheet" type="text/css" href="../Css/demo.css">
    <script type="text/javascript" src="../JavaScript/jquery.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.serializeObject.js"></script>
</head>
<body>
<!--列表-->
<table id="dg"></table>
<!--提示框-->
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:300px;padding:10px">
    <!--表单验证-->
    <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
        <table cellpadding="5">
            <tr>
                <td>Name:</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input class="easyui-textbox" type="text" name="password" data-options="required:true,validType:'password'"></td>
            </tr>
            <tr>
                <td>Age:</td>
                <td><input class="easyui-textbox" type="text" name="age" data-options="required:true"></td>
            </tr>
            <tr>
                <td>Address:</td>
                <td><input class="easyui-textbox" type="text" name="address" data-options="required:true"></td>
            </tr>
            <tr>
                <td>edit:</td>
                <td><input type="text" name="_id"></td>
            </tr>
        </table>
    </form>
    <!--按钮-->
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="margin-right:20px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="margin-left:20px">Clear</a>
    </div>
</div>

<!--搜索框-->
<div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:10px;">
    <form id="ss" method="post" >
        <table style="margin:auto">
            <tr>
                <td>Name:</td>
                <td><input id="name" class="easyui-textbox" type="text" name="name"></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearch()">Search</a>
    </div>
</div>
<script type="text/javascript">
    function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                   //ajax 新增提交
                    var data = $("#ff").serializeObject();
                    if(data._id && data._id.trim().length>0){
                        //editMode
                        $.ajax({
                            method:'put',
                            data:data,
                            url:'http://localhost:3000/users/data/' +data._id,
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }else{
                        //addMode
                        delete data._id;
                        $.ajax({
                            method:'post',
                            data:data,
                            url:'http://localhost:3000/users/data'
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }
                }else{
                    //错误提示
                        $.messager.show({
                            title:'信息提示',
                            msg:'表单验证有误，请重新输入',
                            timeout:5000,
                            showType:'slide'
                        });
                }
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }
    var toolbar = [{
        text:'Add',
        iconCls:'icon-add',
        handler:function(){
            $('#dlg').dialog('open');
        }
    },{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg)==true){
                var gss = $("#dg").datagrid('getSelections');
                var ids = [];
                for(var i=0;i<gss.length;i++){
                    ids.push(gss[i]._id);
                }
                $.ajax({
                    url:'http://localhost:3000/users/deletes',
                    method:'post',
                    data:{ids:ids.toString()}
                }).done(function(res){
                    if(res.status === 200){
                        $.messager.show({
                            title:'信息提示',
                            msg:'删除数据成功',
                            timeout:5000,
                            showType:'slide'
                        });
                    }else{
                        $.messager.show({
                            title:'信息提示',
                            msg:'请选中要删除的数据',
                            timeout:5000,
                            showType:'slide'
                        });
                    }
                    $("#dg").datagrid("reload");
                })
            }
        }
    },{
        text:'Search',
        iconCls:'icon-search',
        handler:function(){
            $('#w').window('open');
        }
    },
      {
          text:'Back',
          iconCls:'icon-back',
          handler:function(){
              $('#dg').datagrid('load', {
                  name: "" ,
              });
          }
       }
    ];
    function doSearch(){
        var search = $("#name").val();
        console.log(search);
        $('#dg').datagrid('load', {
            name: search ,
        });
        $('#w').window('close');
    }
            $('#dg').datagrid({
                toolbar:toolbar,
                pagination:true,
                method:'post',
                fit:true,
                url:'http://localhost:3000/users/list',
                columns:[[
                    {field:'ck',checkbox:true},
                    {field:'_id',title:'ID',width:180},
                    {field:'name',title:'名称',width:150},
                    {field:'password',title:'密码',width:150},
                    {field:'age',title:'年龄',width:150},
                    {field:'address',title:'地址',width:150},
                    {field:'opt',title:'操作',width:150,
                    formatter: function (value,row,index){
                        return "<a href='javascript:void(0)' onclick='editData()'class='edit' style='color:red'>编辑</a> <a href='javascript:void(0)'class='del' onclick='Delete()' style='color:red'>删除</a>"
        }
    }
                ]],
                onDblClickRow(index,row){
                    editData(row);
                },
                onLoadSuccess:function(data){
                    $('.edit').linkbutton({text:'编辑',plain:true,});
                    $('.del').linkbutton({text:'删除',plain:true,});
                },
            });
            function editData(row){
                $('#ff').form('load',row);
                $('#dlg').dialog('open');
            }
            function Delete(){
                var msg = "您真的确定要删除吗？\n\n请确认！";
                if (confirm(msg)==true){
                    var gss = $("#dg").datagrid('getSelections');
                    var ids = [];
                    for(var i=0;i<gss.length;i++){
                        ids.push(gss[i]._id);
                    }
                    $.ajax({
                        url:'http://localhost:3000/users/deletes',
                        method:'post',
                        data:{ids:ids.toString()}
                    }).done(function(res){
                        if(res.status === 200){
                            $.messager.show({
                                title:'信息提示',
                                msg:'删除数据成功',
                                timeout:5000,
                                showType:'slide'
                            });
                        }else{
                            $.messager.show({
                                title:'信息提示',
                                msg:'请选中要删除的数据',
                                timeout:5000,
                                showType:'slide'
                            });
                        }
                        $("#dg").datagrid("reload");
                    })
                }
            }


</script>
</body>
</html>